<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>TurboDX AI 智能搜索系统 - 登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(-45deg, #0A2463, #3E92CC, #2CA58D, #84B082);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            font-family: Arial, sans-serif;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .login-container {
            width: 400px;
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .logo {
            font-size: 48px;
            color: #1890ff;
            margin-bottom: 20px;
        }

        .login-header h2 {
            margin: 0;
            color: #1f1f1f;
            font-size: 24px;
        }

        .login-header p {
            margin: 8px 0 0;
            color: #666;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 24px;
            position: relative;
        }

        .form-group i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #bfbfbf;
            font-size: 16px;
            transition: all 0.3s;
        }

        .form-group input {
            width: 100%;
            padding: 12px 12px 12px 40px;
            border: 2px solid #e8e8e8;
            border-radius: 8px;
            font-size: 14px;
            box-sizing: border-box;
            transition: all 0.3s;
        }

        .form-group input:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: none;
        }

        .form-group input:focus+i {
            color: #1890ff;
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .remember-me {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .remember-me input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }

        .remember-me label {
            color: #666;
            font-size: 14px;
        }

        .forgot-password {
            color: #1890ff;
            font-size: 14px;
            text-decoration: none;
        }

        button[type="submit"] {
            width: 100%;
            padding: 12px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        button[type="submit"]:hover {
            background: #40a9ff;
        }

        .error-message {
            display: none;
            background: #fff2f0;
            border: 1px solid #ffccc7;
            padding: 12px;
            border-radius: 8px;
            color: #ff4d4f;
            font-size: 14px;
            margin-bottom: 16px;
        }

        .footer-text {
            text-align: center;
            margin-top: 24px;
            color: #666;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div class="login-container">
        <div class="login-header">
            <div class="logo">
                <i class="fas fa-brain"></i>
            </div>
            <h2>TurboDX AI 智能搜索系统</h2>
            <p>智能数据分析，助力决策优化</p>
        </div>

        <div id="errorMessage" class="error-message">
            用户名或密码错误，请重试
        </div>

        <form id="loginForm">
            <div class="form-group">
                <input type="text" id="username" placeholder="请输入用户名" required>
                <i class="fas fa-user"></i>
            </div>
            <div class="form-group">
                <input type="password" id="password" placeholder="请输入密码" required>
                <i class="fas fa-lock"></i>
            </div>

            <div class="remember-forgot">
                <div class="remember-me">
                    <input type="checkbox" id="remember">
                    <label for="remember">记住密码</label>
                </div>
                <a href="#" class="forgot-password">忘记密码？</a>
            </div>

            <button type="submit">
                <i class="fas fa-sign-in-alt"></i>
                登录系统
            </button>
        </form>

        <div class="footer-text">
            © 2024 TurboDX AI. All rights reserved.
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 检查是否有保存的登录信息
            const savedUsername = localStorage.getItem('username');
            const savedPassword = localStorage.getItem('password');
            const rememberMe = localStorage.getItem('rememberMe');

            if (rememberMe === 'true' && savedUsername && savedPassword) {
                document.getElementById('username').value = savedUsername;
                document.getElementById('password').value = savedPassword;
                document.getElementById('remember').checked = true;
            }
        });

        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;
            const errorMessage = document.getElementById('errorMessage');

            if (username === 'admin' && password === '123456') {
                // 设置登录状态
                sessionStorage.setItem('isLoggedIn', 'true');

                // 如果选择记住密码，保存登录信息
                if (remember) {
                    localStorage.setItem('username', username);
                    localStorage.setItem('password', password);
                    localStorage.setItem('rememberMe', 'true');
                } else {
                    // 清除保存的登录信息
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                    localStorage.removeItem('rememberMe');
                }
                window.location.href = 'dashboard.html';
            } else {
                errorMessage.style.display = 'block';
                setTimeout(() => {
                    errorMessage.style.display = 'none';
                }, 3000);
            }
        });
    </script>
</body>

</html>